import React, {Component} from 'react';
import ReactCSSTransitionGroup from 'react-addons-css-transition-group'
import {observer} from 'mobx-react'
import fetchJsonp from 'fetch-jsonp'
import '../styles/Rank.css';
import RankPage from './RankPage'
@observer
class Rank extends Component {
  constructor(props) {
    super(props)
    this.showRank = this.showRank.bind(this)
    this.hideRank = this.hideRank.bind(this)
    this.state = {
      topList: [],
      topId: null,
      isRankShow: false
    }
  }

  showRank(id) {
    this.setState({
      topId: id,
      isRankShow: !this.state.isRankShow
    })
  }

  hideRank() {
    this.setState({
      isRankShow: !this.state.isRankShow
    })
  }

  componentDidMount() {
    const that = this;
    fetchJsonp('http://c.y.qq.com/v8/fcg-bin/fcg_myqq_toplist.fcg?format=jsonp&g_tk=5381&uin=0&inCharset=utf-8&outCharset=utf-8&notice=0&platform=h5&needNewCode=1&_=' + new Date().getTime(),
      {
        jsonpCallback: 'jsonpCallback'
      })
      .then(res => res.json())
      .then((response) => {
        that.setState({
          topList: response.data.topList
        })
      })
  }

  render() {
    return (
      <div className="rank">
        <ul>
          {
            this.state.topList.map(item => (
              <li className="rank-item" onClick={() => {
                this.showRank(item.id)
              }} key={item.id}>
                <div className="rank-media">
                  <img src={item.picUrl} alt=""/>
                  <span className="listen-count">{item.listenCount}</span>
                </div>
                <div className="rank-info">
                  <p className="rank-title">{item.topTitle}</p>
                  {
                    item.songList.map((song, index) => (
                      <p className="rank-songs" key={index}>
                        {index + 1}
                        {song.songname}
                        <span className="rank-singername">-{song.singername}</span>
                      </p>
                    ))
                  }

                </div>
              </li>
            ))
          }

        </ul>
        <ReactCSSTransitionGroup
          component="div"
          transitionName="page"
          transitionEnterTimeout={300}
          transitionLeaveTimeout={300}
        >
          {
            this.state.isRankShow && <RankPage topId={this.state.topId} hideRank={this.hideRank}/>
          }
        </ReactCSSTransitionGroup>
      </div>
    );
  }
}

export default Rank;
